<template>
  <div v-if="show" class="toast">
    {{ message }}
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from "vue";

onBeforeUnmount(() => {
  clearTimeout(messagetime.value);
});

const show = ref(false);
const message = ref("");
const messagetime = ref(null);
const showToast = (msg) => {
  if (messagetime.value) clearTimeout(messagetime.value);
  message.value = msg;
  show.value = true;
  messagetime.value = setTimeout(() => {
    show.value = false;
    message.value = "";
  }, 2000);
};

defineExpose({
  showToast,
});
</script>

<style scoped>
.toast {
  position: fixed;
  top: 10%;
  left: 50%;
  font-size: 2rem;
  transform: translate(-50%, -50%);
  padding: 2rem;
  background-color: rgb(51, 51, 51);
  color: #fff;
  border-radius: 0.4rem;
  z-index: 9999;
}
</style>
